<script lang="ts">
    import { onMount } from 'svelte';
    import { Link, navigate } from 'svelte-routing';
    import { get } from '../../utils/api';
    import { addToast } from '../../stores/toastStore';
    import Header from '../../components/Header.svelte';
    import Footer from '../../components/Footer.svelte';
    import Nav from '../../components/Nav.svelte';

    let loading = true; // 加载中
    let items = []
    async function getItems() {
        try {
            const response = await get('/operation/vehicle-repairs');
            items = response.data;
        } catch (error) {
            addToast('数据加载失败'+error, 'error', 3000);
        }
    }
    function showItems(id: number) {
        navigate('/vehicle-repair-result?id='+result.data.id)
    }

    onMount(() => {
        try {
            getItems();
        } catch (err) {
        } finally {
            loading = false;
        }
    });
</script>

<main>
    <Header title="维修记录"/>
    <div class="flex items-center space-x-2 leading-10 px-4 py-1">
        <div class="flex-1">
            <input type="date" placeholder="申请时间" class="border rounded px-2 py-1 text-sm w-full">
        </div>
        <div class="flex-1">
            <input type="text" placeholder="🔍搜索车牌" class="border rounded px-2 py-1 text-sm w-full">
        </div>
    </div>

    <div class="flex-1 overflow-y-auto">
        <div class="p-4 pt-2">
            {#each items as item}
                <div class="bg-white shadow rounded-md p-4 mb-2" on:click={showItems(item.id)}>
                    <Link to="/vehicle-repair-detail?id={item.id}" class="flex justify-between">
                        <div class="text-lg font-semibold">{item.plate_number}</div>
                        <div class="text-gray-400">已完成 ></div>
                    </Link>
                    <div class="text-sm mt-2">
                        <div>申请时间: {item.created_at}</div>
                        <div>维修内容: {item.explanation}</div>
                        <div>备注: {item.remark}</div>
                    </div>
                </div>
            {/each}
        </div>
    </div>
    <Footer />
</main>

<style lang="scss">
</style>
